<template>
  <div>=={{n}}==={{obj.age}}
 <input  type="button" @click="say()" value="btn"/>
  </div>
</template>

<script>
import {ref,watch,reactive}  from  'vue'
export default {
  // watch:{
  //   // flag(newVal,oldVal){

  //   // }
  //   flag:{
  //     handler(newVal,oldVal){},
  //     deep:true,
  //     immediate:true
  //   }
  // },
  setup () {
    var  n=ref(0)
    var obj=reactive({
      id:1,
      name:'rose',
      age:18
    })
   
    //  watch(n,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal,99);
    //  })

    //   watch(obj,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal,99);
    //  })

    //  watch(()=> obj,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal,99);
    //  })

    // watch(obj.age,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal,99);
    //  })

    // watch(()=>obj.age,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal,99);
    //  },{
    //     immediate:true,
    //     deep:true
    //  })

    //  监听对象写的不是函数 ，可以直接监听到属性内部,
    //  只能获取新值
     watch(obj,(newVal,oldVal)=>{
       console.log(newVal,oldVal,33);
     })

// 监听对象如果写的是一个函数，那改变对象中的属性不会触发监听器，如果想触发需要使用深度监听 deep:true
 //  只能获取新值
     watch( ()=>obj,(newVal,oldVal)=>{
       console.log(newVal,oldVal,44);
     },{
       deep:true
     })
     //  如果监听对象写的是函数，监听的是对象中的属性，可以触发
     // 可以获取新旧值
     watch( ()=>obj.age,(newVal,oldVal)=>{
       console.log(newVal,oldVal,55);
     })
//  四种写法：  obj   [obj]  ()=>obj    ()=>obj.age
//   如果监听对象包在数组中，那就可以触发
//  获取的是新值
    watch([obj,n],(newVal,oldVal)=>{
       console.log(newVal,oldVal,66);
     })
     const say = () => {
      n.value++
      obj.age++
    
    }

    return {say,n,obj}
  }
}
</script>

<style lang="scss" scoped>

</style>